<template>
    <el-form :model="registerForm" label-width="130px" class="register-setting">
        <el-form-item label="是否允许注册会员">
            <el-radio-group v-model="registerForm.allow_register">
                <el-radio :label="0">关闭</el-radio>
                <el-radio :label="1">开启</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="注册类型">
            <el-radio-group v-model="registerForm.register_type">
                <el-radio :label="1">普通注册</el-radio>
                <el-radio :label="2">手机注册</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="密码最小长度">
            <el-input v-model="registerForm.password_min_length" placeholder="请输入密码最小长度"
                style="width: 400px;"></el-input>
        </el-form-item>

        <el-form-item label="强制密码复杂度">
            <el-checkbox-group v-model="registerForm.password_complexity">
                <el-checkbox label="number">数字</el-checkbox>
                <el-checkbox label="lowercase">小写字母</el-checkbox>
                <el-checkbox label="uppercase">大写字母</el-checkbox>
                <el-checkbox label="special">符号</el-checkbox>
            </el-checkbox-group>
        </el-form-item>

        <el-form-item>
            <el-button color="var(--primary-theme-color)" size="small" type="primary" @click="saveSettings">保存</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { reactive } from 'vue'
import useElementPlus from "@/hooks/useElementPlus"

const { message } = useElementPlus()

const registerForm = reactive({
    allow_register: 1,
    register_type: 1,
    password_min_length: '7',
    password_complexity: ['number', 'lowercase', 'uppercase']
})

const saveSettings = () => {
    // 实现保存设置的逻辑
    message({
        message: "保存成功",
        type: "success"
    })
}
</script>

<style lang="scss" scoped>
.register-setting {
    padding: 20px 0;

    .el-checkbox-group {
        display: flex;
        flex-wrap: wrap;

        .el-checkbox {
            margin-right: 20px;
            margin-bottom: 10px;
        }
    }

    .el-button {
        margin-top: 10px;
    }
}
</style>